<template>
  <div class="page-js-basic">
    <div class="content">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="item in list" :key="item.id" :title="item.title" :name="item.id">
          <div>{{ item.content }}</div>
        </el-collapse-item>
        <el-collapse-item title="你对堆区和栈区的理解" name="2">
          <div>
            <div class="fwb">1.在操作系统中，内存被分为栈区和堆区</div>
            <div>栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。</div>
            <div>堆区内存一般由开发着分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。</div>
            <div class="fwb">2.在数据结构中</div>
            <div>在数据结构中，栈中数据的存取方式为先进后出。</div>
            <div>堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。</div>
            <div class="fwb">3.数据的储存方式</div>
            <div>原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；</div>
            <div>
              引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="数据类型检测的方式有哪些" name="3">
          <div class="fwb">判断数据类型的方法一般可以通过：typeof、instanceof、constructor、toString四种常用方法</div>
          <img class="image" src="@/assets/img/js-basic-1.png" alt="" />
        </el-collapse-item>
        <el-collapse-item title="判断数组的方式有哪些" name="4">
          <div>1.通过Object.prototype.toString.call()做判断</div>
          <div>2.通过原型链做判断</div>
          <div>3.通过ES6的Array.isArray()做判断</div>
          <div>4.通过instanceof做判断</div>
          <div>5.通过Array.prototype.isPrototypeOf</div>
        </el-collapse-item>
        <el-collapse-item title="null和undefined区别" name="5">
          <div>1.首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。</div>
          <div>
            2.undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回
            undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。
          </div>
          <div>
            3.undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined
            值的判断。我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。
          </div>
          <div>
            4.当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回
            true，使用三个等号时会返回 false。
          </div>
        </el-collapse-item>
        <el-collapse-item title="为什么0.1+0.2 ! == 0.3" name="6">
          <div>计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。</div>
          <div>
            在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的需要舍去，遵从“0舍1入”的原则,0.1和0.2的二进制数相加。所以0.1
            + 0.2，再转化为十进制数就是：0.30000000000000004
          </div>
        </el-collapse-item>
        <el-collapse-item title="Object.is() 与比较操作符 “===”、“==” 的区别" name="7">
          <div>使用双等号（==）进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。</div>
          <div>使用三等号（===）进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。</div>
          <div>使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的。</div>
        </el-collapse-item>
        <el-collapse-item title="Js中隐式转换规则" name="8">
          <img
            src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8249e191d95c46a8b66effb504b3de93~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?"
            alt=""
          />
        </el-collapse-item>
        <el-collapse-item title="深拷贝和浅拷贝" name="9">
          <div class="fwb">* 浅拷贝：只是复制了一个指向堆内存中值的指针，堆内存并没有独立，所以会相互影响；</div>
          <div class="fwb">* 深拷贝：增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，完全独立，两者互不影响</div>
          <div>展开运算符使用的对象如果只是针对简单的一级基础数据，就是深拷贝；* 展开运算符使用的对象内容包含二级或更多的复杂的数据，那就是浅拷贝；</div>
          <div>
            object.assign()主要用于对象合并，将源对象中的属性复制到目标对象中，他将返回目标对象。如果有同名属性的话，后面的属性值会覆盖前面的属性值，如果有多个源对象，没有同名的属性会直接复制到目标对象上，还可以进行对象的深浅拷贝，当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。
          </div>
        </el-collapse-item>
        <el-collapse-item title="JSON.stringify深拷贝的缺点" name="10">
          <div>1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式</div>
          <div>2.如果obj里面有RegExp，则打印出来是空对象</div>
          <div>3.如果对象中有函数或者undefined，则会直接被丢掉</div>
          <div>4.如果json里有对象是由构造函数生成的，则会丢掉对象的constructon</div>
        </el-collapse-item>
        <el-collapse-item title="Map和Object的区别" name="11">
          <img class="image" src="@/assets/img/js-basic2.png" alt="" />
        </el-collapse-item>
        <el-collapse-item title="数组的遍历方法有哪些" name="12">
          <img class="image" src="@/assets/img/js-basic3.png" alt="" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { list } from './index'

const activeNames = ref('')
const handleChange = () => {
    //
}
</script>

<style lang="less" scoped>
.page-js-basic {
  width: 100%;
  // height: 100%;
  border: 1px solid rgba(75, 145, 242, 0.6);
  .content {
    padding: 20px;
    .image {
      width: 1000px;
    }
  }
}
</style>
